articles

Home / DeveloperSection / Articles / Responsive layout in Android

Responsive layout in Android

Manoj Pandey3671 05-Mar-2015

Android does not provide Responsive layout. You have need to create different layout for supporting all the screens.

If you would want to display same number of buttons in all screens then I would suggest you to prepare different set of images/drawables and include them in your project. Here you don't need to do anything other than placing images in particular drawable folders.

Android provides drawable folder. A Drawable resource is a general concept for a graphic which can be drawn. The simplest case is a graphical file (bitmap), which would be represented in Android via a BitmapDrawable class. Every Drawable is stored as individual files in one of the res/drawable folders.

drawable-ldpi-: By default android takes drawable images or files from this folder. It also supporting for lower density screen.

Drawable-mdpi-:For supporting medium density screens.

drawable-hdpi-: For supporting higher density screen.

drawable-xhdpi-:This folder supports for extra higher density screen.

drawable-xxhdpi-: This drawable folder support extra extra higher density screens.

You can also add folder for different layout. i.e

Responsive layout in Android

Here I am creating a sample ui of calculator for different – different screens

On default layout folder (layout/activity_main.xml)

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center"

    android:orientation="vertical"

    tools:context=".MainActivity">

 

    <EditText

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginBottom="30sp"

        android:layout_marginLeft="10sp"

        android:layout_marginRight="10sp"

        android:hint="Enter Value"/>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".50"

            android:text="C"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="+"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".25"

            android:text="-"/>

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="1"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="2"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="3"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".25"

            android:text="/"/>

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="4"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="5"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="6"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".25"

            android:text="*"/>

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="7"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="8"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="9"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="="/>

    </LinearLayout>

 

</LinearLayout>

On layout-landscappe mode (res/layout-land/activity.xml)

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    tools:context=".MainActivity">

 

    <EditText

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginLeft="10sp"

        android:layout_marginRight="10sp"

        android:layout_marginTop="15sp"

        android:hint="Enter Value"/>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="30sp"

        android:orientation="horizontal">

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="1"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="2"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="3"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".17"

            android:text="C"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="+"/>

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="4"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="5"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="6"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".17"

            android:text="-"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="*"/>

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="7"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="8"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="9"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".17"

            android:text="/"/>

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="="/>

    </LinearLayout>

 

</LinearLayout>

 

You can create layout on layout-large and layout-large-land folder for large screen.

Now see calculator layout

For android device

 Responsive layout in Android

    

On device landscape

 Responsive layout in Android

On android tab

 

Responsive layout in Android


Updated 07-Sep-2019

Leave Comment

Comments

Liked By